<!-- 预约 -->
<template>
	<view class="appointment" :style="{'--color':vuex_config.themeColor1}">
		<view class="appointment-item">
			<view class="go-appointment">
				立即预约
			</view>
			<u-form :model="form" ref="uForm" :error-type="errorType">
				<!-- 输入姓名 -->
				<u-form-item :border-bottom='false' prop="username">
					<u-input v-model="form.username" height='88' placeholder-style='color:#999999' :clearable='false' placeholder='请输入您的姓名' />
				</u-form-item>
				<!-- 输入手机号 -->
				<u-form-item :border-bottom='false' prop="phone">
					<u-input v-model="form.phone" type="number" height='88' placeholder-style='color:#999999' :clearable='false'
					 placeholder='请输入您的手机号' />
				</u-form-item>
				<!-- 输入验证码 -->
				<u-form-item :border-bottom='false' prop="verification">
					<u-input v-model="form.verification" height='88' placeholder-style='color:#999999' :clearable='false' placeholder='请输入您的验证码' />
					<view class="verification" slot="right" @click="check">
						验证码
					</view>
				</u-form-item>
				<!-- 选择预约时间 -->
				<u-form-item prop="time">
					<u-input v-model="form.time" height='88' placeholder-style='color:#999999' :clearable='false' placeholder='请输入您的预约时间'
					 :disabled='true' @click="choiceTime" />
					<u-icon size="30" color="#999999" name="arrow-right" @click="choiceTime"></u-icon>
				</u-form-item>
				<u-button @click="submit" :hair-line='false'>提交</u-button>
			</u-form>
		</view>
		<!-- 时间选择器 -->
		<u-picker mode="time" v-model="show" :params="params" @confirm='confirm'></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				// 定义时间选择器的 年、月、日、时、秒的显示
				params: {
					year: true, //年
					month: true, //月
					day: true, //日
					hour: true, //时
					minute: false, //分
					second: false, //秒
					timestamp: false, //是否返回时间戳
				},
				//校验不通过toast提示
				errorType: ['toast'],
				// 表单数据
				form: {
					username: '',
					phone: '',
					verification: '',
					time: ''
				},
				// 表单校验规则
				rules: {
					username: {
						required: true,
						message: '请输入姓名',
						trigger: 'blur',
					},
					phone: {
						required: true,
						message: '请输入手机号',
						trigger: 'blur',
					},
					time: {
						required: true,
						message: '请输入预约时间',
						trigger: 'blur',
					},
					verification: {
						required: true,
						message: '请输入验证码',
						trigger: 'blur',
					}
				}
			};
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (!valid) {
					console.log('验证失败');	
					} else {
						console.log('验证通过');
					}
				});
			},
			// 点击选择预约时间
			choiceTime() {
				this.show = true;
			},

			//点击验证码
			check() {
				console.log('点击验证码')
			},
			// 选择预约时间之后回调
			confirm(data) {
				// 获取到用户选择时间 是一个对象
				let time = []
				let dataArr = Object.keys(data).forEach(item => {
					time.push(data[item])
				})
				// 转换格式
				this.form.time = time.join('-') //  2020-12-26-08
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f5f5f5;
	}

	.appointment-item {
		height: 745rpx;
		width: 665rpx;
		background-color: #fff;
		margin: 360rpx auto 0;
		padding: 30rpx 30rpx 0;
	}

	.go-appointment {
		text-align: center;
		font-size: 36rpx;
		color: #333333;
		font-weight: 700;
		margin-bottom: 50rpx;
	}

	.verification {
		width: 150rpx;
		height: 50rpx;
		text-align: center;
		// height: 50rpx;
		line-height: 50rpx;
		background-color: var(--color);
		color: #fff;
		border-radius: 10rpx;
		font-size: 22rpx;
	}

	/deep/ .u-form-item {
		padding: 0 20rpx;
		margin-bottom: 40rpx;
		height: 88rpx;
		border: 1rpx solid var(--color);
		border-radius: 10rpx;
	}

	/deep/ .u-form-item input {
		height: 88rpx;
	}

	.select {
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 86rpx;
		align-items: center;
	}

	.select-time {
		color: #999;
	}


	/deep/ .u-btn {
		background-color: var(--color);
		padding: 0;
		width: 400rpx;
		height: 80rpx;
		border-radius: 40rpx;
		color: #fff;
	}

	// /deep/ .u-form-item__message {
	// 	display: none;
	// }
</style>
